<template>
  <div
    class="road-property-container"
    :style="{
      color: themeStyle[theme].textColor1
    }"
  >
    <div
      class="title"
      :style="{
        borderBottom: `1px solid ${themeStyle[theme].borderColor1}`
      }"
    >
      <span style="color: #0087dc">{{ '边属性' }}</span>
      <div class="icon" :class="edgeData.lock ? 'lockIcon' : ''">
        <template v-if="edgeData.lock">
          <LockOutlined @click="switchLock" />
        </template>
        <template v-else>
          <UnlockOutlined @click="switchLock" />
        </template>
      </div>
    </div>

    <div class="attr-content">
      <SizeTransition>
        <Form
          :model="edgeData"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          :label-align="'left'"
          :disabled="edgeData.lock"
          autocomplete="off"
        >
          <div
            class="attr-tab-title"
            :style="{
              backgroundColor: themeStyle[theme].backgroundColor3,
              color: themeStyle[theme].textColor2
            }"
          >
            <div
              class="attr-tab-title-item"
              :style="{ color: dataType === 'simData' ? '#0087dc' : '' }"
              @click="dataType = 'simData'"
            >
              边数据
            </div>
            <div
              class="attr-tab-title-item"
              :style="{ color: dataType === 'style' ? '#0087dc' : '' }"
              @click="dataType = 'style'"
            >
              边样式
            </div>
          </div>

          <div class="attr-tab-content">
            <template v-if="dataType === 'style'">
              <!-- zIndex -->
              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '节点层级' }}</span
                  >
                </template>
                <div style="display: flex">
                  <Input
                    v-model:value="edgeData.zIndex"
                    type="number"
                    size="small"
                    :suffix="'px'"
                    @change="handleChange"
                  />
                </div>
              </FormItem>

              <!-- 宽度 -->
              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '宽度' }}</span
                  >
                </template>
                <div style="display: flex">
                  <Input
                    v-model:value="edgeData.style.width"
                    type="number"
                    size="small"
                    :suffix="'px'"
                    @change="handleChange"
                  />
                </div>
              </FormItem>

              <!-- 路由 -->
              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '路由' }}</span
                  >
                </template>
                <Select v-model:value="edgeData.style.router" size="small" @change="handleChange">
                  <SelectOption value="normal">
                    <span style="color: #666; font-size: 13px">直线</span>
                  </SelectOption>
                  <SelectOption value="orth">
                    <span style="color: #666; font-size: 13px">正交</span>
                  </SelectOption>
                </Select>
              </FormItem>

              <!-- 连接器 -->
              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '连接器' }}</span
                  >
                </template>
                <Select
                  v-model:value="edgeData.style.connectorName"
                  size="small"
                  @change="handleChange"
                >
                  <SelectOption value="normal">
                    <span style="color: #666; font-size: 13px">普通</span>
                  </SelectOption>
                  <SelectOption value="rounded">
                    <span style="color: #666; font-size: 13px">圆角</span>
                  </SelectOption>
                  <SelectOption value="smooth">
                    <span style="color: #666; font-size: 13px">平滑</span>
                  </SelectOption>
                </Select>
              </FormItem>

              <!-- 圆角半径 -->
              <FormItem v-if="edgeData.style.connectorName === 'rounded'">
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ '圆角半径' }}</span
                  >
                </template>
                <div style="display: flex">
                  <Input
                    v-model:value="edgeData.style.connectorRadius"
                    type="number"
                    size="small"
                    :suffix="'px'"
                    @change="handleChange"
                  />
                </div>
              </FormItem>

              <FormItem>
                <template #label>
                  <span
                    class="content-item-label"
                    :style="{
                      color: themeStyle[theme].textColor1
                    }"
                    >{{ 'Path' }}</span
                  >
                </template>
                <div style="display: flex">
                  <Popover placement="left" :trigger="'click'">
                    <template #content>
                      <div style="width: 200px">
                        <span>{{ edgeData.simData.path }}</span>
                      </div>
                    </template>
                    <span
                      style="
                        width: 100%;
                        overflow: hidden;
                        text-wrap: nowrap;
                        text-overflow: ellipsis;
                      "
                      >{{ edgeData.simData.path }}</span
                    >
                  </Popover>
                </div>
              </FormItem>
            </template>
            <template v-if="dataType === 'simData'">
              <div
                class="stop-at"
                :style="{
                  backgroundColor: themeStyle[theme].backgroundColor3,
                  color: themeStyle[theme].textColor2
                }"
              >
                <span>停靠点</span>
                <PlusSquareOutlined @click="addStops" />
              </div>
              <template v-for="(item, index) in edgeData.labels" :key="index">
                <FormItem>
                  <template #label>
                    <span
                      class="content-item-label"
                      :style="{
                        color: themeStyle[theme].textColor1
                      }"
                      >{{ '停靠点' + (index + 1) }}</span
                    >
                  </template>
                  <div style="display: flex">
                    <Input
                      v-model:value="item.distance"
                      type="number"
                      size="small"
                      @blur="handleChange"
                    />
                  </div>
                </FormItem>
              </template>
            </template>
          </div>
        </Form>
      </SizeTransition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { storeToRefs } from 'pinia'
import { edgeData, handleChange } from './RoadProHook'
import { LockOutlined, UnlockOutlined } from '@ant-design/icons-vue'
import SizeTransition from '@renderer/components/sizeTransition/SizeTransition.vue'
import { PlusSquareOutlined } from '@ant-design/icons-vue'
import { Form, FormItem, Input, Popover, Select, SelectOption } from 'ant-design-vue'
import { ref } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
    required: false
  }
})
edgeData.value = props.data

const globalStyleStore = useStyleStore()
const { theme, themeStyle } = storeToRefs(globalStyleStore)

const switchLock = (): void => {
  edgeData.value.lock = !edgeData.value.lock
  // handleChange()
}

const addStops = (): void => {
  edgeData.value.labels.push({
    text: 'Ⓟ',
    distance: 0.5
  })
  handleChange()
}

//现在显示的数据类型
const dataType = ref<'simData' | 'style'>('simData')
</script>

<style scoped lang="scss">
.road-property-container {
  width: 100%;
  height: 100%;
  font-size: $font-size-medium;

  .title {
    padding: 3px 5px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;

    .icon {
      margin-right: 10px;
      width: 25px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      color: #7e7e7e;
      cursor: pointer;
    }
    .lockIcon {
      background-color: $icon-active-bgColor;
      color: $icon-active-color;
    }
  }

  .attr-content {
    padding: 5px 3px 5px 6px;
    height: calc(100% - 60px);

    :deep(.ant-input-affix-wrapper) {
      border-radius: 0px;
    }
    :deep(.ant-form-item) {
      margin-bottom: 0px;
    }
    :deep(.ant-input-sm) {
      border-radius: 0px;
    }
    :deep(.ant-select-selector) {
      border-radius: 0px;
    }

    .attr-tab-title {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 25px;
      font-size: 13px;
      .attr-tab-title-item {
        cursor: pointer;
      }
    }

    .attr-tab-content {
      overflow-y: auto;
      padding: 5px 3px 5px 0px;
      :deep(.ant-input-affix-wrapper) {
        border-radius: 0px;
      }
      :deep(.ant-form-item) {
        margin-bottom: 0px;
      }
      :deep(.ant-input-sm) {
        border-radius: 0px;
      }
      :deep(.ant-select-selector) {
        border-radius: 0px;
      }

      .stop-at {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5px;
        height: 25px;
        font-size: 13px;
      }
    }
  }
}
</style>
